<!--  -->
<template>
  <div id="detail">
    <!-- 顶部导航栏 -->
    <detail-nav-bar @detailNavItemClick="detailNavItemClick" ref="detailNavBar"></detail-nav-bar>

    <scroll
      class="detail-scroll"
      ref="scroll"
      @scroll="contentScroll"
      :probeType="3"
      :pullUpLoad="true"
    >
      <!-- 商品轮播图 -->
      <detail-swiper
        :topImages="topImages"
        class="detail-swiper"
        @detailSwiperLoaded="detailSwiperLoaded"
      ></detail-swiper>

      <!-- 商品信息 -->
      <data-base-info :goods="goods"></data-base-info>

      <!-- 商品店铺信息 -->
      <detail-shop-info :shop="shop"></detail-shop-info>

      <!-- 商品穿着信息 -->
      <detail-goods-info
        :detailInfo="detailInfo"
        @detailGoodsImageLoaded="detailSwiperLoaded"
      ></detail-goods-info>

      <!-- 商品参数信息 -->
      <detail-params-info :paramInfo="paramInfo" ref="param"></detail-params-info>

      <!-- 商品评论信息 -->
      <detail-comment-info :commentInfo="commentInfo" ref="comment"></detail-comment-info>

      <!-- 更多商品信息 -->
      <detail-recommend-info
        :recommendGoods="recommendGoods"
        ref="recommend"
      ></detail-recommend-info>
    </scroll>
    
    <!-- 回到顶部小按钮 -->
    <back-top v-show="showBackTop" @click.native="backTopClick"></back-top>

    <!-- 底部加入购物车一栏 -->
    <detail-bottom-bar @addGoodToCart="addGoodToCart"></detail-bottom-bar>
  </div>
</template>

<script>
import Mixin from "common/mixin";
import request from "network/detail";
import Scroll from "components/common/scroll/Scroll.vue";
import BackTop from "components/content/backtop/BackTop.vue";
import DetailNavBar from "./childComps/DetailNavBar.vue";
import DetailSwiper from "./childComps/DetailSwiper.vue";
import DataBaseInfo from "./childComps/DataBaseInfo.vue";
import DetailShopInfo from "./childComps/DetailShopInfo.vue";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo.vue";
import DetailParamsInfo from "./childComps/DetailParamsInfo.vue";
import DetailCommentInfo from "./childComps/DetailCommentInfo.vue";
import DetailRecommendInfo from "./childComps/DetailRecommendInfo.vue";
import DetailBottomBar from './childComps/DetailBottomBar.vue';

  // 引入辅助函数
  import { mapActions } from 'vuex'

export default {
  data() {
    return {
      //保存商品的ID
      id: "",
      //商品轮播图列表数据
      topImages: [],

      // 商品标题简单介绍里的数据
      goods: {},

      // 商品店家的信息
      shop: {},

      // 商品具体信息及展示图片穿着信息
      detailInfo: {},

      // 商品尺寸参数等信息
      paramInfo: {},

      // 商品评论相关信息
      commentInfo: {},

      // 更多商品推荐信息
      recommendGoods: [],

      //记录商品参数评论等距离顶部的高度
      themeY:[],

      //记录顶部导航栏的当前索引
      currIndex:0
    };
  },

  components: {
    DetailNavBar,
    DetailSwiper,
    DataBaseInfo,
    Scroll,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailParamsInfo,
    DetailCommentInfo,
    DetailRecommendInfo,
    BackTop,
    DetailBottomBar,
  },
  mixins: [Mixin.backTopMixin],
  created() {
    this.getDetail();
    this.getRecommend();
  },
  updated() {
    this.$refs.scroll.refresh();
  },
  computed: {},

  mounted() {

  },
  activated() {
    this.$refs.scroll.refresh();
  },

  methods: {
    ...mapActions(['getGoodsInfo']),
    getDetail() {
      this.id = this.$route.query.iid;
      request.getDetail(this.id).then((res) => {
        const data = res.data.result;
        //console.log(data);
        this.topImages = data.itemInfo.topImages;
        // 商品介绍的数据
        this.goods = new request.GoodInfo(
          data.itemInfo,
          data.columns,
          data.shopInfo.services
        );

        // 商品店家的信息数据
        this.shop = new request.Shop(data.shopInfo);

        // 商品具体信息及穿着展示图片数据
        this.detailInfo = data.detailInfo;

        // 商品尺码等数据
        this.paramInfo = new request.GoodsParam(
          data.itemParams.info,
          data.itemParams.rule
        );

        // 商品评论数据
        if (data.rate.list) {
          this.commentInfo = data.rate.list[0];
        }
      });
    },

    getRecommend() {
      request.getRecommend().then((res) => {
        this.recommendGoods = res.data.data.list;
      });
    },

    detailSwiperLoaded() {
      this.$refs.scroll.refresh();

      this.themeY = [];
      this.themeY.push(0);
      this.themeY.push(this.$refs.param.$el.offsetTop);
      this.themeY.push(this.$refs.comment.$el.offsetTop);
      this.themeY.push(this.$refs.recommend.$el.offsetTop);
      this.themeY.push(Number.MAX_VALUE)
    },

    detailNavItemClick(index){
       //console.log(this.themeY)
       this.$refs.scroll.scrollTo(0,-this.themeY[index],1000);
    },

    contentScroll(position){
       let y = -position.y;
       this.showBackTopImage(y);

       for(let i=0;i<this.themeY.length-1;i++){
          if(this.currIndex!=i){
             if(y >= this.themeY[i] && y < this.themeY[i+1]){
                this.currIndex = i;
                this.$refs.detailNavBar.currentIndex = this.currIndex;
             }
          }
       }
    },
    
    //将商品添加到购物车
    addGoodToCart(){

        // 获取购物车需要展示的信息
        const product = {};
        product.image = this.topImages[0];
        product.title = this.goods.title;
        product.desc = this.goods.desc;
        product.realPrice = this.goods.realPrice;
        product.id = this.id;

        this.getGoodsInfo(product).then(res=>{
           this.$toast.show('加入购物车成功')
        })
    }
  },
};
</script>
<style lang='scss' scoped>
#detail {
  position: relative;
  height: 100vh;
}
.detail-scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 60px;
  overflow: hidden;
}
</style>